<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>04_元素类名的操作</title>
		<!-- html:    h1     div id="targetElment"
							 四个按钮  id="addclassBtn" 
									  id="removeclassBtn"
									  id="toggleclassBtn"切换
									  id="hasclassBtn"
							 div id="resultArea"
			 css:		.bg{300*300 背景色自定}
						.bd{10像素实现边框  倒角:画圆}
		 -->
		 <!-- 元素类名操作  针对css中类名，可以做添加、移除、切换和包含雷鸣操作
		 addClass()				有参[1个参，多个参]
								功能：匹配元素集合中的所有元素添加一个类名或多个类名
								语法:addClass("类名")
								语法:addClss("类名1 类名2")
		removeClass()			有参【一个参，多个参】
								功能：从匹配元素集合中的所有元素移除一个类名或多个类名
		toggleClass()			功能：如果元素有指定类名则移除，没有则添加  
		 hasClass() 			功能能：检查匹配元素集合中是否存在指定类名，返回值bool
		  
		  
		  -->
		 <style>
			 .bg{
				 width: 300px;
				 height: 300px;
				 background-color: #e048bf;
				
			 }
			 .bd{
				 width: 300px;
				 height: 300px;
				 border: 10px solid red;
				 border-radius: 50%;
			 }
			 
			 
		 </style>
		 <script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<!-- html结构  4个按钮  2个空间 -->
		<h1></h1>
		<div id="targetElment"></div>
		<button id="addclassBtn">添加类名</button>
		<button id="removeclassBtn">移除类名</button>
		<button id="toggleclassBtn">切换类名</button>
		<button id="hasclassBtn">判断存在类名</button>
		<div id="resultArea"></div>
		<script>
			//1.类名切换:css存在可用类名
			$("#addclassBtn").click(function(){
				$("#targetElment").addClass("bd ");
				$("#resultArea").html("<h4>已经切换了样式:.bg</h4>")
			});
			//2.移除类名  :实现效果    点击移除类名   实现300*300  红色背景
			$("#removeclassBtn").click(function(){
				$("#targetElment").removeClass("bg bd");
				$("#resultArea").html("<h4>已经移除了:.bd</h4>")
			});
			//3.切换类名:     实现效果   点击切换类名  实现300*300的原边框  红色背景色
			$("#toggleclassBtn").click(function(){
				$("#targetElment").toggleClass("bg");
				$("#resultArea").html("<h4>切换了:.bd</h4>")
			});
			//4.样式全部移除，实现效果，实现300*300背景色
			$("#toggleclassBtn").click(function(){
				//存在bg  移除     不存在  添加  bg
				$("#targetElment").addClass("bg");
				$("#resultArea").html("<h4>切换了:.bd</h4>")
			});
			//5.检查类名是否存在
			$("#hasclassBtn").click(function(){
				var hc=$("#targetElment").hasClass("bg");
				$("#resultArea").text("目标元素 bg 类名是否存在:"+hc);
			});
		</script>
	</body>
</html>